<template>
  <div class="record-pay-list">
    <!-- 搜索表单 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="金额">
          <el-input-number
            v-model="searchForm.amount"
            placeholder="请输入金额"
            :precision="2"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="管理员名称">
          <el-input
            v-model="searchForm.managerName"
            placeholder="请输入管理员名称"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="订单ID">
          <el-input
            v-model="searchForm.orderID"
            placeholder="请输入订单ID"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="支付名称">
          <el-input
            v-model="searchForm.payName"
            placeholder="请输入支付名称"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="支付类型">
          <el-input
            v-model="searchForm.payType"
            placeholder="请输入支付类型"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择类型"
            style="width: 200px"
            clearable
          >
            <el-option label="类型1" :value="1" />
            <el-option label="类型2" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.userName"
            placeholder="请输入用户名"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.cTimeDateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="x"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据列表 -->
    <el-card class="table-card">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">
            <el-text type="success">{{ row.amount }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="orderID" label="订单ID" width="200" />
        <el-table-column prop="payName" label="支付名称" width="150" />
        <el-table-column prop="payType" label="支付类型" width="120" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.type === 1 ? 'success' : 'info'">
              {{ row.type === 1 ? '类型1' : '类型2' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="120" />
        <el-table-column prop="managerName" label="管理员" width="120" />
        <el-table-column prop="cTime" label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.cTime) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="searchForm.page"
          v-model:page-size="searchForm.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getRecordPayList } from "@/api/system";
import { RecordPayListParams, RecordPayList } from "@/api/types";

// 搜索表单
const searchForm = ref<RecordPayListParams>({
  page: 1,
  size: 10,
  amount: undefined,
  cTimeDateRange: undefined,
  managerName: undefined,
  orderID: undefined,
  payName: undefined,
  payType: undefined,
  type: undefined,
  userName: undefined,
});

// 表格数据
const tableData = ref<RecordPayList[]>([]);
const total = ref(0);
const loading = ref(false);

// 加载数据
const loadData = async () => {
  try {
    loading.value = true;
    const response:any = await getRecordPayList(searchForm.value);
    if (response.code === 0) {
      tableData.value = response.data.data;
      total.value = response.data.total;
    } else {
      ElMessage.error(response.message || '获取数据失败');
    }
  } catch (error) {
    console.error('获取数据失败:', error);
    ElMessage.error('获取数据失败');
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  searchForm.value.page = 1;
  loadData();
};

// 重置
const handleReset = () => {
  searchForm.value = {
    page: 1,
    size: 10,
    amount: undefined,
    cTimeDateRange: undefined,
    managerName: undefined,
    orderID: undefined,
    payName: undefined,
    payType: undefined,
    type: undefined,
    userName: undefined,
  };
  loadData();
};

// 分页大小改变
const handleSizeChange = (size: number) => {
  searchForm.value.size = size;
  searchForm.value.page = 1;
  loadData();
};

// 当前页改变
const handleCurrentChange = (page: number) => {
  searchForm.value.page = page;
  loadData();
};

// 格式化时间
const formatTime = (timestamp: number) => {
  if (!timestamp) return '-';
  const date = new Date(timestamp * 1000);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

// 组件挂载时加载数据
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.record-pay-list {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>
